<!-- 企业选择弹窗 -->
<template>
  <u-popup :modelValue="show" mode="top" :mask="false"
    :customStyle="{ top: `${popTop}px !important`, width: '560rpx', left: '50%', transform: 'translateX(-50%) !important' }"
    :scrollCustomStyle="{ 'max-height': `${maxHeight}px !important` }" :maskZoom="false" duration="200"
    border-radius="12" @close="emit('close')">
    <view class="society-pop_wrap px-4 py-5">
      <scroll-view class="whitespace-nowrap max-height-520" scroll-y :show-scrollbar="false">
        <view class="flex items-center justify-center" @click="emit('close')">
          <view class="c-#fff text-24 mr-2 font-bold">选择学社</view>
          <u-icon name="arrow-up" color="#fff" size="24" />
        </view>
        <!-- 最多显示三个 超过滑动查看 -->
        <view v-for="(item, index) in state.societySwitchList" :key="index" class="society-item mt-3">
          <view @click.stop="onSocietyChange(item)" class="bg-white w-416 h-136 rounded-md p-3 flex">
            <u-image width="114" height="96" border-radius="12" :src="item.club?.cover_image" />
            <view class="ml-2 flex flex-col justify-between h-96 text-single">
              <view class="c-#333 text-28 text-single">{{ item.club?.club_name }}</view>
              <view class="flex">
                <u-image width="26" height="26" shape="circle" :src="item.creator?.avatar" />
                <view class="c-#999 text-24 ml-1">{{ item.creator?.nickname }}</view>
              </view>
            </view>
          </view>
          <view class="c-#F4AF22 text-28" @click.stop="onSocietyChange(item)">切换</view>
        </view>
      </scroll-view>
    </view>
  </u-popup>
</template>

<script setup name="society-pop">
import { getSocietySwitchList } from '@/common/http/module/society.js'

const emit = defineEmits(['switch', 'close']);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  club_id: [Number, String]
});

const state = reactive({
  societySwitchList: [] // 切换学社列表
})

const sysInfo = uni.getSystemInfoSync()
// 需要给定一个弹窗最大高度，否则会顶到最下面，而且会无法滑动，造成显示不全
const maxHeight = sysInfo.windowHeight - 160
const popTop = uni.getMenuButtonBoundingClientRect().bottom + 4

// 切换学社
function onSocietyChange (item) {
  emit('switch', item)
  loadData(item.club_id)
}

// 获取切换学社列表
async function loadData (club_id) {
  const { data } = await getSocietySwitchList(club_id)
  state.societySwitchList = data
}

onMounted(() => {
  loadData(props.club_id)
})
</script>

<style lang="scss" scoped>
.society-pop_wrap {
  position: relative;
  background-color: rgba(102, 102, 102, .8);
  box-shadow: -16px 2px 6px 0px rgba(206, 143, 12, 0.3);
  // max-height: 575rpx;

  .society-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.max-height-520 {
  max-height: 520rpx;
}

.u-drawer__scroll-view {
  height: 700rpx;
}
</style>
